<template>
  <div class="yongjinjilu">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div
          style="
            height: 91px;
            border-bottom: 1px solid rgb(227, 232, 241);
            width: 100%;
            padding: 0 30px;
          "
          class="flexbc"
        >
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/yongjin' }"
              >佣金结算</el-breadcrumb-item
            >
            <el-breadcrumb-item>佣金结算记录</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>

        <div
          style="
            padding: 37px 30px 0 30px;
            height: calc(100vh - 91px);
            overflow: auto;
          "
        >
          <div style="margin-bottom: 3rem">
            <div class="t_choose_tab_box">
              <div
                @click="changestatus('0')"
                :class="{ t_tab_title_lei: search.all == 0 }"
                class="t_tab_title"
              >
                佣金结算记录
                <div
                  class="t_under_line"
                  :class="{ t_under_line_lei: search.all == 0 }"
                ></div>
              </div>
              <div
                @click="changestatus('1')"
                :class="{ t_tab_title_lei: search.all == 1 }"
                class="t_tab_title"
                style="margin-left: 40px; position: relative"
              >
                佣金结算明细
                <div
                  class="t_under_line"
                  :class="{ t_under_line_lei: search.all == 1 }"
                ></div>
              </div>
              <div
                @click="changestatus('2')"
                :class="{ t_tab_title_lei: search.all == 2 }"
                class="t_tab_title"
                style="
                  margin-left: 40px;
                  margin-right: 70px;
                  position: relative;
                "
              >
                分销奖励明细
                <div
                  class="t_under_line"
                  :class="{ t_under_line_lei: search.all == 2 }"
                ></div>
              </div>
            </div>
          </div>
          <!-- 佣金结算明细搜索栏 -->
          <div
            v-if="search.all == '1'"
            style="
              background: rgb(255, 255, 255);
              border-radius: 20px;
              padding: 20px;
            "
            class="flexb"
          >
            <div class="flex">
              <div>
                <div style="margin: 10px 0">订单ID</div>
                <div>
                  <el-input
                    v-model="search1.order_no"
                    style="width: 180px; margin-right: 30px"
                    placeholder="请输入"
                  ></el-input>
                </div>
              </div>
              <div>
                <div style="margin: 10px 0">生产号码</div>
                <div>
                  <el-input
                    v-model="search1.plan_mobile_produce"
                    style="width: 180px; margin-right: 30px"
                    placeholder="请输入"
                  ></el-input>
                </div>
              </div>
              <div>
                <div style="margin: 10px 0">商品名称</div>
                <div>
                  <el-input
                    v-model="search1.goods_name"
                    style="width: 180px; margin-right: 30px"
                    placeholder="请输入"
                  ></el-input>
                </div>
              </div>
              <div>
                <div style="margin: 10px 0">所属一级分销商</div>
                <div>
                  <el-input
                    v-model="search1.first_distributor_name"
                    style="width: 180px; margin-right: 30px"
                    placeholder="请输入"
                  ></el-input>
                </div>
              </div>
              <div>
                <div style="margin: 10px 0">直接发展人</div>
                <div>
                  <el-input
                    v-model="search1.distributor_name"
                    style="width: 180px; margin-right: 30px"
                    placeholder="请输入"
                  ></el-input>
                </div>
              </div>
              <div>
                <div style="margin: 10px 0">结算状态</div>
                <div>
                  <el-select
                    clearable
                    filterable
                    style="width: 100px; margin-right: 30px"
                    v-model="search1.ok"
                    placeholder="请选择"
                  >
                    <el-option label="满足结算" value="1"></el-option>
                    <el-option label="不满足结算" value="0"></el-option>
                  </el-select>
                </div>
              </div>
                <div>
                  <div style="margin: 10px 0">下单时间</div> 
                  <!-- :picker-options="pickerOptions" -->
                  <el-date-picker style="width: 375px; " v-model="dateTime" @change="dateTimeChange" 
                 :clearable='true' value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00', '23:59:59']"
                  range-separator="-" start-placeholder="下单时间" end-placeholder="下单结束时间">
                </el-date-picker>
                </div>
                <div style="margin: 0 10px;"></div>
                <div>
                <div style="margin: 10px 0">激活时间</div> 
                <el-date-picker style="width:375px; " v-model="dateTimes" @change="dateTimeChanges" 
                 :clearable='true' value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00', '23:59:59']"
                  range-separator="-" start-placeholder="激活开始时间" end-placeholder="激活结束时间">
                </el-date-picker>
                  <el-button
                    type="primary"
                    style="margin-left: 10px;"
                    round
                    size="large"
                    icon="el-icon-search"
                    @click="sousuo"
                    >检索</el-button
                  >
                  <el-button type="primary" round @click="daochu"
                    >导出订单</el-button
                  >
                </div>

              </div>
            <div>
              <div style="margin-bottom: 10px">&nbsp;</div>
            </div>
          </div>
          <!-- 分销奖励明细搜索栏 -->
          <div
            v-if="search.all == '2'"
            style="
              background: rgb(255, 255, 255);
              border-radius: 20px;
              padding: 20px;
            "
            class="flexb"
          >
          <!-- :picker-options="pickerOptions" -->
            <div class="flex">
              <el-date-picker
                style="width: 470px"
                v-model="times"
                @change="timechange"
                
                :clearable="true"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                :default-time="['00:00:00', '23:59:59']"
                range-separator="——"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
              <div style="margin-left: 30px">
                <el-button type="primary" round @click="searchbtn"
                  >搜索</el-button
                >
                <el-button type="primary" round @click="exportDetails"
                  >导出明细</el-button
                >
              </div>
            </div>
          </div>

          <!-- 佣金结算记录、佣金结算明细列表 -->
          <el-table
            :data="list"
            style="width: 100%"
            v-if="search.all == '0' || search.all == '1'"
            key="index1"
          >
            <el-table-column
              fixed
              width="240"
              show-overflow-tooltip="true"
              v-if="search.all == '1'"
              align="center"
              prop="order_no"
              label="订单ID"
            ></el-table-column>
            <el-table-column
              width="160"
              v-if="search.all == '1'"
              align="center"
              prop="plan_mobile_produce"
              label="生产号码"
            ></el-table-column>
            <el-table-column
            width="160"
              v-if="search.all == '1'"
              align="center"
              prop="order_created_at"
              label="创建时间"
            ></el-table-column>
            <el-table-column
            width="160"
              v-if="search.all == '1'"
              align="center"
              prop="active_at"
              label="激活时间"
            ></el-table-column>
            <el-table-column
              width="160"
              align="center"
              prop="created_at"
              label="结算时间"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip="true"
              width="250"
              v-if="search.all == '1'"
              align="center"
              prop="goods_name"
              label="商品名称"
            ></el-table-column>
            <el-table-column
            width="200"
              v-if="search.all == '1'"
              align="center"
              prop="active_name"
              label="激活状态"
            ></el-table-column>
            <el-table-column
            width="200"
              v-if="search.all == '1'"
              align="center"
              prop="goods_sku"
              label="商品编码"
            ></el-table-column>
            <el-table-column
              v-if="search.all == '0'"
              align="center"
              prop="ok_count"
              label="满足结算订单"
            ></el-table-column>
            <el-table-column
              v-if="search.all == '0'"
              align="center"
              label="不满足结算订单"
            >
              <template slot-scope="scope">{{
                scope.row.orders_count - scope.row.ok_count
              }}</template>
            </el-table-column>
            <el-table-column
              v-if="search.all == '1'"
              align="center"
              prop="commission"
              label="结算金额"
            ></el-table-column>
            <el-table-column
              width="300"
              v-if="search.all == '0'"
              align="center"
              prop="sum_commission"
              label="结算金额"
            ></el-table-column>
            <el-table-column
            width="200"
              v-if="search.all == '1'"
              align="center"
              prop="ok"
              label="是否满足结算"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.ok == '1'">满足</span>
                <div v-if="scope.row.ok == '0'" style="color: rgb(236, 82, 1)">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="scope.row.remark"
                    placement="top"
                  >
                    <div>
                      不满足
                      <i
                        style="color: rgb(236, 82, 1)"
                        class="el-icon-warning"
                      ></i>
                    </div>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column
            width="200"
              v-if="search.all == '1'"
              align="center"
              prop="first_distributor_name"
              label="所属一级分销商"
            ></el-table-column>
            <el-table-column
            width="200"
              v-if="search.all == '1'"
              align="center"
              prop="distributor_name"
              label="直接发展人"
            ></el-table-column>
            <el-table-column
            width="200"
              v-if="search.all == 1"
              align="center"
              prop="ok"
              label="结算触发方式"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.settlement_conditions == 1">自动触发</div>
                <div v-if="scope.row.settlement_conditions == 0">人工导入</div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="search.all == 1"
              align="center"
              width="200"
              prop="settlement_type"
              label="佣金阶段类型"
            >
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.settlement_type == 2 ||
                    scope.row.settlement_type == 1
                  "
                >
                  全部佣金
                </div>
                <div v-if="scope.row.settlement_type == 31">一阶段激活</div>
                <div v-if="scope.row.settlement_type == 32">二阶段充值</div>
              </template>
            </el-table-column>
            <el-table-column
              width="300"
              align="center"
              label="操作"
              fixed='right'
            >
              <template slot-scope="scope">
                 <div style="display: flex;justify-content: flex-start;">
                  <div
                  v-if="search.all == '0'"
                  @click="xiazai(scope.row.id)"
                  style="color: rgb(0, 90, 255); cursor: pointer;margin-right: 10px;"
                >
                  下载明细
                </div>
                <div
                  v-if="search.all == '1'"
                  @click="clickDetails(scope.row)"
                  style="color: rgb(0, 90, 255); cursor: pointer;margin-right: 10px;"
                >
                  查看详情
                </div>

                <div
                  v-if="search.all == '1' && scope.row.status != 15"
                  @click="chehui(scope.row.commission_order_id)"
                  style="color: rgb(0, 90, 255); cursor: pointer;margin-right: 10px;"
                >
                  撤回结算
                </div>
                 </div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分销奖励明细列表 -->
          <el-table
            :data="list1"
            style="width: 100%"
            v-if="search.all == '2'"
            key="index2"
          >
            <el-table-column
              fixed
              width="210"
              align="center"
              prop="order_no"
              label="订单ID"
            ></el-table-column>
            <el-table-column
              width="210"
              align="center"
              prop="created_at"
              label="结算时间"
            ></el-table-column>
            <el-table-column
              width="210"
              align="center"
              prop="status_name"
              label="订单状态"
            ></el-table-column>
            <el-table-column
              width="210"
              align="center"
              prop="active_name"
              label="激活状态"
            ></el-table-column>
            <el-table-column
              width="210"
              align="center"
              prop="ok_name"
              label="结算状态"
            ></el-table-column>
            <el-table-column
              width="210"
              align="center"
              prop="user_commission"
              label="结算金额"
            ></el-table-column>
            <el-table-column
              width="210"
              align="center"
              prop="name"
              label="奖励分销商"
            ></el-table-column>
            <el-table-column
              fixed="right"
              width="210"
              align="center"
              prop="share_name"
              label="订单发展人"
            ></el-table-column>
          </el-table>
          <el-dialog
            title="结算详情"
            width="500px"
            :visible.sync="detailsDialogShow"
            append-to-body="true"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
          >
            <div v-for="(item, index) in jiesuanxiangqingList">
              <div v-if="xiangqingOk == 1" style="float: left; width: 50%">
                {{ numberToUpperCase(index) }}级分销抽成:{{
                  item.user_commission
                }}
              </div>
              <div v-if="xiangqingOk == 0" style="float: left; width: 50%">
                {{ numberToUpperCase(index) }}级分销抽成: 未结算
              </div>
              <div style="float: left; width: 50%">账号：{{ item.name }}</div>
              <div style="clear: both"></div>
            </div>
            <div style="clear: both"></div>
            <div v-if="xiangqingOk == 1" style="float: left; width: 50%">
              直接发展人：{{ directordeveloper }}
            </div>
            <div v-if="xiangqingOk == 0" style="float: left; width: 50%">
              直接发展人：未结算
            </div>
            <div style="float: left; width: 50%">账号：{{ zNumber }}</div>
            <div slot="footer" class="dialog-footer">
              <el-button round @click="detailsDialogShow = false"
                >关闭</el-button
              >
            </div>
          </el-dialog>
          <el-pagination
            v-if="search.all == '0'"
            style="text-align: right; padding: 20px"
            background
            layout="prev,pager,next,total,jumper"
            :current-page="search.page"
            @current-change="fanye"
            :page-size="search.page_size"
            :total="total"
          ></el-pagination>
          <el-pagination
            v-if="search.all == '1'"
            style="text-align: right; padding: 20px"
            background
            layout="prev,pager,next,total,jumper"
            :current-page="search1.page"
            @current-change="fanye"
            :page-size="search1.page_Size"
            :total="total1"
          ></el-pagination>
          <el-pagination
            v-if="search.all == '2'"
            style="text-align: right; padding: 20px"
            background
            layout="prev,pager,next,total,jumper"
            :current-page="search2.page"
            @current-change="fanye"
            :page-size="search2.pageSize"
            :total="total2"
          ></el-pagination>

          <!-- <footers></footers> -->
        </div>
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="cuowulog"
      width="440px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div>
        <div v-for="item in cuowu" :key="item" style="margin-bottom: 10px">
          {{ item }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cuowulog = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- <el-dialog title="设置排序" :visible.sync="paixu_log" width="440px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div><el-input v-model="dangqianshangpin.order" style="width: 360px;"></el-input></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paixu_log = false">关闭</el-button>
        <el-button type="primary" @click="xiugai">确定</el-button>
      </span>
    </el-dialog> -->

    <div
      v-if="shoujiban"
      style="
        color: rgb(2, 12, 29);
        font-size: 0.24rem;
        background: #f6f8fb;
        padding-top: 1rem;
      "
    >
      <topandleft></topandleft>
      <div style="background: #fff; padding: 0.3rem">
        <div class="flexc" style="margin-bottom: 0.3rem">
          <div
            style="
              width: 2px;
              height: 0.2rem;
              background: rgb(2, 12, 29);
              margin-right: 10px;
              overflow: hidden;
            "
          ></div>
          <div style="font-size: 0.36rem; font-weight: bold">佣金结算</div>
        </div>
        <div class="flexc" style="margin-bottom: 0.3rem">
          <div style="color: rgb(175, 179, 188)">首页</div>
          <div style="margin: 0 0.2rem; color: rgb(175, 179, 188)">·</div>
          <div style="color: rgb(175, 179, 188)">佣金结算</div>
          <div style="margin: 0 0.2rem; color: rgb(175, 179, 188)">·</div>
          <div>佣金结算记录</div>
        </div>
      </div>
      <div style="padding: 0.3rem">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            v-for="item in list"
            :key="item.id"
            style="
              background: #fff;
              padding: 0.2rem;
              margin-bottom: 0.2rem;
              border-radius: 0.2rem;
            "
          >
            <div class="flexbc" style="margin-bottom: 0.2rem">
              <div>结算时间</div>
              <div>{{ item.created_at }}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.2rem">
              <div>满足结算订单</div>
              <div>{{ item.ok_count }}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.2rem">
              <div>不满足结算订单</div>
              <div>{{ item.orders_count - item.ok_count }}</div>
            </div>
            <div class="flexbc" style="margin-bottom: 0.2rem">
              <div>结算金额</div>
              <div>{{ item.sum_commission }}</div>
            </div>

            <div class="flexc">
              <div
                @click="xiazai(item.id)"
                style="color: rgb(0, 90, 255); cursor: pointer"
              >
                下载明细
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import left from "../left.vue";
import top from "../top.vue";
import footers from "../footer.vue";
import topandleft from "../topandleft.vue";
export default {
  name: "yongjinjilu",
  components: {
    left,
    top,
    topandleft,
    footers,
  },
  data() {
    return {
      search: {
        page: 1,
        page_size: 20,
        all: "0",
      },
      search1: {
        start_time:'',
        end_time :'',
        activated_start:'',
        activated_end:'',
        page: 1,
        page_Size: 20,
        order_no: "",
        goods_name: "",
        first_distributor_name: "",
        distributor_name: "",
        ok: "", //0不满足 1满足
        // all:'1'
      },
      search2: {
        page: 1,
        pageSize: 20,
      },
      dateTime:[],
      dateTimes:[],
      list: [],
      list1: [],
      total: 1,
      total1: 1,
      total2: 1,
      widthss: false,
      shoujiban: false,
      loading: false,
      finished: false,
      detailsDialogShow: false,
      directordeveloper: "", //直接发展人
      zNumber: "", //账号
      jiesuanxiangqingList: [], //佣金结算详情弹窗返回数组
      xiangqingOk: "", //查看详情弹窗中的ok
      minDate: new Date(2023, 0, 1),
      selectDate: "",
      times: [],
      
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime();
          if (maxDate) {
            this.selectDate = "";
          }
        },
        disabledDate: (time) => {
          if (this.selectDate !== "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
      cuowu: [],
      cuowulog: false,
    };
  },
  created() {
    // this.getlist()
  },
  mounted() {
    if (window.screen.width == 1920) {
      this.widthss = true;
    }
    if (window.screen.width < 1080) {
      this.shoujiban = true;
      var h = document.documentElement.clientWidth / 7.5 + "px";
      document.documentElement.style.fontSize = h;

      // this.onLoad()
    } else {
      this.getlist();
    }
  },
  methods: {
    //下单时间检索
    dateTimeChange:function(val){
      console.log(this.dateTime,'我是dateTime');
        if (this.dateTime == null) {
        	this.search1.start_time  = ''
        	this.search1.end_time = ''
        } else {
        	this.search1.start_time = this.dateTime[0]
        	this.search1.end_time = this.dateTime[1]
        }
      },
      //激活时间检索
      dateTimeChanges:function(val){
        if (this.dateTimes == null) {
        	this.search1.activated_start  = ''
        	this.search1.activated_end = ''
        } else {
        	this.search1.activated_start = this.dateTimes[0]
        	this.search1.activated_end = this.dateTimes[1]
        }
      },
    chehui: function (id) {
      this.$confirm(
        "撤销可以挽回部分损失，佣金会同时结算给中间商和发展人，期间已经已提现的部分无法插销，是否确定撤销?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        axios
          .post("/own/commission/orders/expend/revoke", { ids: [id] })
          .then((response) => {
            if (response.data.msg.code == 0) {
              if (response.data.data.data.length > 0) {
                this.cuowu = response.data.data.data;
                this.cuowulog = true;
              }

              this.getYongjinjiesuan();
            } else {
              this.$message.error(response.data.msg.info);
            }
          });
      });
    },

    daochu: function () {
      axios
        .get("/own/commission/details/export", { params: this.search1 })
        .then((response) => {
          if (response.data.msg.code == 0) {
            window.location.href = response.data.data;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    onLoad() {
      axios
        .get("/own/commission/sums", { params: this.search })
        .then((response) => {
          if (response.data.msg.code == 0) {
            if (response.data.data.data.length > 0) {
              response.data.data.data.forEach((item) => {
                this.list.push(item);
              });

              if (this.list.length >= response.data.data.total) {
                this.finished = true;
              } else {
                this.search.page++;
                this.loading = false;
              }
            } else {
              this.finished = true;
            }
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    xiazai: function (id) {
      axios
        .post("/own/commission/sumdetail/exp", { id: id })
        .then((response) => {
          if (response.data.msg.code == 0) {
            window.location.href = location.origin + "/" + response.data.data;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    sousuo: function () {
      this.search.page = 1;
      this.getYongjinjiesuan();
    },
    //获取佣金结算记录列表
    getlist: function () {
      axios
        .get("/own/commission/sums", { params: this.search })
        .then((response) => {
          if (response.data.msg.code == 0) {
            this.list = response.data.data.data;
            this.total = response.data.data.total;
            this.loading = false;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    fanye: function (val) {
      if (this.search.all == 0) {
        this.search.page = val;
        this.getlist();
      }
      if (this.search.all == 1) {
        this.search1.page = val;
        this.getYongjinjiesuan();
      }
      if (this.search.all == 2) {
        this.search2.page = val;
        this.getFenxiaojiangli();
      }
    },
    //tab切换
    changestatus(val) {
      this.search.all = val;
      if (val == 0) {
        this.search.page = 1;
        this.getlist();
      }
      if (val == 1) {
        this.search1.page = 1;
        this.getYongjinjiesuan();
      }
      if (val == 2) {
        this.search2.page = 1;
        this.getDefaultTime();
        this.getFenxiaojiangli();
      }
    },
    //获取佣金结算明细列表
    getYongjinjiesuan() {
      axios
        .get("/own/commission/details", { params: this.search1 })
        .then((response) => {
          if (response.data.msg.code == 0) {
            this.list = response.data.data.data;
            this.total1 = response.data.data.total;
            this.loading = false;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    //获取分销奖励明细列表
    getFenxiaojiangli() {
      axios
        .get("/own/commission/reward/details", { params: this.search2 })
        .then((response) => {
          if (response.data.msg.code == 0) {
            this.list1 = response.data.data.data;
            this.total2 = response.data.data.total;
            this.loading = false;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    //查看详情
    clickDetails(row) {
      this.xiangqingOk = row.ok;
      const obj = {
        commission_order_id: row.commission_order_id,
      };

      // console.log('obj666',obj)
      axios
        .get("/own/commission/order/info", { params: obj })
        .then((response) => {
          this.detailsDialogShow = true;
          if (response.data.msg.code == 0) {
            this.directordeveloper =
              response.data.data[response.data.data.length - 1].user_commission;
            this.zNumber =
              response.data.data[response.data.data.length - 1].name;
            this.jiesuanxiangqingList = response.data.data.slice(
              0,
              response.data.data.length - 1
            );
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    //点开查看详情里的循环 阿拉伯数字变大写几级分销那里
    numberToUpperCase(textIndex) {
      let newString = "";
      let newTextIndex = textIndex + 1 + "";
      function sum(value, index) {
        var newValue = "";
        if (textIndex === 9) {
          return !index ? "十" : "";
        }
        let isSeat = ~~textIndex > 9 && ~~textIndex < 19;
        switch (~~value) {
          case 1:
            newValue = !index ? (isSeat ? "" : "一") : "十一";
            break;
          case 2:
            newValue = !index ? (isSeat ? "" : "二") : "十二";
            break;
          case 3:
            newValue = !index ? (isSeat ? "" : "三") : "十三";
            break;
          case 4:
            newValue = !index ? (isSeat ? "" : "四") : "十四";
            break;
          case 5:
            newValue = !index ? (isSeat ? "" : "五") : "十五";
            break;
          case 6:
            newValue = !index ? (isSeat ? "" : "六") : "十六";
            break;
          case 7:
            newValue = !index ? (isSeat ? "" : "七") : "十七";
            break;
          case 8:
            newValue = !index ? (isSeat ? "" : "八") : "十八";
            break;
          case 9:
            newValue = !index ? (isSeat ? "" : "九") : "十九";
            break;
          case 0:
            newValue = "十";
            break;
          default:
            break;
        }
        return newValue;
      }

      for (let i = 0; i < newTextIndex.length; i++) {
        newString += sum(newTextIndex.substring(i, i + 1), i);
      }
      return newString;
    },
    timechange: function (val) {
      if (this.times == null) {
        this.search2.start_time = "";
        this.search2.end_time = "";
      } else {
        this.search2.start_time = this.times[0];
        this.search2.end_time = this.times[1];
      }
    },
    searchbtn() {
      if (this.search2.start_time && this.search2.end_time) {
        this.getFenxiaojiangli();
      } else {
        delete this.search2.start_time;
        delete this.search2.end_time;
        this.getFenxiaojiangli();
      }
    },
    //设置默认时间
    getDefaultTime() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      this.times[0] = start;
      this.times[1] = end;
      this.search2.start_time = this.newDate(this.times[0]);
      this.search2.end_time = this.newDate(this.times[1]);
    },
    //标准时间转化为年月日 时分秒
    newDate(time) {
      var date = new Date(time);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
    },
    //导出
    exportDetails() {
      axios
        .get("/own/commission/reward/export", { params: this.search2 })
        .then((response) => {
          if (response.data.msg.code == 0) {
            location.href = response.data.data;
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
  },
};
</script>


<style scoped>
.t_choose_tab_box {
  display: flex;
}
.t_tab_title {
  color: rgb(152, 155, 161);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 20px;
}
.t_tab_title_lei {
  color: #005aff;
  font-weight: bold;
  font-size: 24px;
}
.t_under_line {
  width: 30px;
  height: 2px;
  background-color: #f6f8fb;
  margin-top: 10px;
}
.t_under_line_lei {
  background-color: #005aff;
}
</style>
